<template>
	<view v-if="showBackTop" class="back-top" @click="scrollToTop">
		<uni-icons type="arrow-up" size="24"></uni-icons>		
	</view>
</template>

<script setup>
	import {ref} from 'vue';

	const showBackTop = ref(false); 

	// 监听页面滚动事件
	const onPageScroll = (e) => {
		if (e.scrollTop > 700) {
			showBackTop.value = true; 
		} else {
			showBackTop.value = false; 
		}
	};
	// 在uni-app中注册页面滚动事件
	if (typeof getCurrentPages === 'function') {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		currentPage.onPageScroll = onPageScroll;
	}
	
	// 点击页面滚动到顶部
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0, 
			duration: 500, 
		});
	};
</script>

<style lang="scss">
	.back-top {
		position: fixed;
		bottom: 300rpx;
		right: 40rpx;
		width: 70rpx;
		height: 70rpx;
		z-index: 10;
		background-color: rgb(255 255 255 / 80%);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		border: 2rpx solid #e4e4e4;
	}
</style>